<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            获取父节点和兄弟节点
            1.parentNode
            -属性，表示当前节点的父节点
            2.preciousSibling
            -属性，表示当前节点的前一个兄弟节点
            3.nextSibling
            -属性，表示当前节点的后一个兄弟节点
        */


        /* 
            定义一个函数，专门用来为指定元素绑定单击响应函数
            参数：
            idStr  要绑定单击响应函数的对象的id属性
            fun 时间的回调函数，当单击元素时，该函数将会被触发

        */


        function myClick(idStr,fun){
            var btn=document.getElementById(idStr);
            btn.onclick=fun;

        }
        window.onload=function(){
            //为id为btn07的按钮绑定一个单击响应函数
            myClick("btn07",function(){
                //获取id为bj的节点
                var bi=document.getElementById("bj");
                //返回bi的父节点
                var pn=bj.parentNode;
                //alert(pn.innerHTML);
                /* 
                    innerText
                    -该属性可以获取到元素内部的文本内容
                    -他和innerHTM类似，不同的时它会将html去除
                */
               alert(pn.innerText);
            });


               //为id为btn08的按钮绑定一个单击响应函数
               myClick("btn08",function(){
                //获取id为android的节点
                var and=document.getElementById("android");
                //返回android的前一个兄弟节点（也可以可能获取到空白的文本）
                var ps=and.previousSibling;
                //previousElementSibling获取前一个兄弟元素，IE8及以下不支持
                //var pe=and.previousElementSibling
                alert(ps.innerText);
              
            });

               //读取username的value属性值
               myClick("btn09",function(){
                //获取id为username的元素
                var um=document.getElementById("username");
                //读取um的value属性值
                //文本框的value属性值，就是文本框中填写的内容
               alert(um.value);
            });

               //设置usdernamr的value属性值
               myClick("btn10",function(){
                //获取id为username的元素
                var um=document.getElementById("username");
                um.value="今天天气真不错";              
            });

              //返回bj的文本值
              myClick("btn11",function(){
                //获取id为username的元素
                var bj=document.getElementById("bj");
                // alert(bj.innerHTML);
                alert(bj.innerText);
                //获取bj中的文本节点
                /* 
                    var fc=bj.innerHTML
                    alert(fc.nodeValue);
                */
               alert(bj.firstChild.nodeValue);

                
            });


        }
    </script>
</head>
<body>  
    <div id="total">
    <div class="inner">
        <button id="btn01">点一下btn01</button>
        <button id="btn02">点一下btn02</button>
        <button id="btn04">点一下btn04</button>
        <button id="btn05">点一下btn05</button>
        <button id="btn06">点一下btn06</button>
        <button id="btn07">点一下btn07</button>
        <button id="btn08">点一下btn08</button>
        <button id="btn09">点一下btn09</button>
        <button id="btn10">点一下btn10</button>
        <button id="btn11">点一下btn11</button>



        <p>你喜欢哪个城市？</p>
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>武汉</li>
            <li>丹东</li>
            <li>深圳</li>
        </ul>

        <ul>
            <li>小米</li><li id="android">华为</li><li>天语</li><li>中兴</li>
        </ul>
    </div>

    <div class="inner">
     <button id="btn03">点一下btn03</button>
        gender:
        <input  class="hello"  type="radio" name="gender" value="male">
        Male
        <input class="hello" type="radio" name="gender" value="female">
        Female
        <br>
        <br>
        name:
        <input class="hello" type="text"   name="name"  id="username"  value="=abcde">
    </div>
</div>
    
</body>
</html>